<template>
	<view>
		<cu-custom :bgColor="bgColor" :isBack="true">
			<block slot="backText"></block>
			<block slot="content">派工</block>
		</cu-custom>
		<view class="header">
			<view class="input-view">
				<uni-icon type="search" size="22" color="#ffffff"></uni-icon>
				<view class='cuIcon-search'></view>
				<input confirm-type="search" @confirm="onInput" focus="true" class="input" type="text" autofocus="autofocus"
				 placeholder="扫描或输入条码" />
				<view class='cuIcon-scan' @tap="scanCode"  style="transform: scale(1.6,1.6);color: #c6c6c6;"></view>
			</view>
		</view>
		<view class="uni-list">
			<view class="uni-list-cell" hover-class="uni-list-cell-hover" @click="goList()">
				<view class="uni-media-list">
					<view class="content">
						<view class="uni-media-list-text-top" style="height: 60rpx;">
							<text>2022-05-21</text>
							<text style="margin-left: 80rpx;">工序：裁剪和点数</text>
							<text style="margin-left: 100rpx;">部件数：1</text>
						</view>
						<view class="uni-media-list-text-bottom">
							<text>2022-7-243</text>
							<text style="margin-left: 80rpx;">155196</text>
							<text style="margin-left: 100rpx;">批次：1</text>
							<text style="margin-left: 100rpx;">全黑BLACK</text>
							<p>部件名称：舌里标</p>
						</view>	
					</view>
				</view>
			</view>
			
			<view class="uni-list-cell" hover-class="uni-list-cell-hover">
				<view class="uni-media-list">
					<view class="content">
						<view class="uni-media-list-text-top" style="height: 60rpx;">
							<text>2022-05-21</text>
							<text style="margin-left: 80rpx;">工序：裁剪和点数</text>
							<text style="margin-left: 100rpx;">部件数：1</text>
						</view>
						<view class="uni-media-list-text-bottom">
							<text>2022-7-243</text>
							<text style="margin-left: 80rpx;">155196</text>
							<text style="margin-left: 100rpx;">批次：1</text>
							<text style="margin-left: 100rpx;">全黑BLACK</text>
							<p>部件名称：舌里标</p>
						</view>	
							
					</view>
				</view>
			</view>
			
			<view class="uni-list-cell" hover-class="uni-list-cell-hover">
				<view class="uni-media-list">
					<view class="content">
						<view class="uni-media-list-text-top" style="height: 60rpx;">
							<text>2022-05-21</text>
							<text style="margin-left: 80rpx;">工序：裁剪和点数</text>
							<text style="margin-left: 100rpx;">部件数：1</text>
						</view>
						<view class="uni-media-list-text-bottom">
							<text>2022-7-243</text>
							<text style="margin-left: 80rpx;">155196</text>
							<text style="margin-left: 100rpx;">批次：1</text>
							<text style="margin-left: 100rpx;">全黑BLACK</text>
							<p>部件名称：舌里标</p>
						</view>	
							
					</view>
				</view>
			</view>
			<view class="uni-list-cell" hover-class="uni-list-cell-hover">
				<view class="uni-media-list">
					<view class="content">
						<view class="uni-media-list-text-top" style="height: 60rpx;">
							<text>2022-05-21</text>
							<text style="margin-left: 80rpx;">工序：裁剪和点数</text>
							<text style="margin-left: 100rpx;">部件数：1</text>
						</view>
						<view class="uni-media-list-text-bottom">
							<text>2022-7-243</text>
							<text style="margin-left: 80rpx;">155196</text>
							<text style="margin-left: 100rpx;">批次：1</text>
							<text style="margin-left: 100rpx;">全黑BLACK</text>
							<p>部件名称：舌里标</p>
						</view>	
							
					</view>
				</view>
			</view><view class="uni-list-cell" hover-class="uni-list-cell-hover">
				<view class="uni-media-list">
					<view class="content">
						<view class="uni-media-list-text-top" style="height: 60rpx;">
							<text>2022-05-21</text>
							<text style="margin-left: 80rpx;">工序：裁剪和点数</text>
							<text style="margin-left: 100rpx;">部件数：1</text>
						</view>
						<view class="uni-media-list-text-bottom">
							<text>2022-7-243</text>
							<text style="margin-left: 80rpx;">155196</text>
							<text style="margin-left: 100rpx;">批次：1</text>
							<text style="margin-left: 100rpx;">全黑BLACK</text>
							<p>部件名称：舌里标</p>
						</view>	
							
					</view>
				</view>
			</view><view class="uni-list-cell" hover-class="uni-list-cell-hover">
				<view class="uni-media-list">
					<view class="content">
						<view class="uni-media-list-text-top" style="height: 60rpx;">
							<text>2022-05-21</text>
							<text style="margin-left: 80rpx;">工序：裁剪和点数</text>
							<text style="margin-left: 100rpx;">部件数：1</text>
						</view>
						<view class="uni-media-list-text-bottom">
							<text>2022-7-243</text>
							<text style="margin-left: 80rpx;">155196</text>
							<text style="margin-left: 100rpx;">批次：1</text>
							<text style="margin-left: 100rpx;">全黑BLACK</text>
							<p>部件名称：舌里标</p>
						</view>	
							
					</view>
				</view>
			</view><view class="uni-list-cell" hover-class="uni-list-cell-hover">
				<view class="uni-media-list">
					<view class="content">
						<view class="uni-media-list-text-top" style="height: 60rpx;">
							<text>2022-05-21</text>
							<text style="margin-left: 80rpx;">工序：裁剪和点数</text>
							<text style="margin-left: 100rpx;">部件数：1</text>
						</view>
						<view class="uni-media-list-text-bottom">
							<text>2022-7-243</text>
							<text style="margin-left: 80rpx;">155196</text>
							<text style="margin-left: 100rpx;">批次：1</text>
							<text style="margin-left: 100rpx;">全黑BLACK</text>
							<p>部件名称：舌里标</p>
						</view>	
							
					</view>
				</view>
			</view>
			
		</view>
	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bgColor: 'bg-green',
			}
		},
		
		methods: {
			scanCode() {
				let that = this;
				uni.scanCode({
					success: function(res) {
						that.searchText = res.result;
						let e = {};
						e.detail = {};
						e.detail.value = res.result;
						that.onInput(e);
					}
				});
			},
			goList(){
				uni.navigateTo({
					url:'/pages/mcloud/dcDispatchOrderList'
				})
			}
		}	
	}
</script>

<style>
	.header {
		display: flex;
		flex-direction: row;
		padding: 10px 15px;
		align-items: center;
		background-color: #314054;
	}
	.input-view {
		display: flex;
		align-items: center;
		flex-direction: row;
		background-color: #414f61;
		height: 30px;
		border-radius: 15px;
		padding: 0 10px;
		flex: 1;
	}
	
	.input {
		flex: 1;
		padding: 0 5px;
		height: 24px;
		line-height: 24px;
		font-size: 16px;
		color: #FFFFFF;
	}
	
	.qiu p{
		display: inline;
	}
	.uni-media-list-text-bottom {
		font-size: 24rpx;
		color: darkturquoise;
	}
	.uni-media-list-text-bottom p{
		margin-top: 10rpx;
	}
</style>
